<template>
  <Dialog
    @input="$listeners.input"
    :value="$attrs.value"
    :title="$attrs.title"
    :width="$attrs.width"
  >
    <template #headerAppend>
      <v-icon @click="close" class="icon" color="#fff">mdi-close</v-icon>
    </template>
    <v-card height="760">
      <v-spacer>
        <v-col class="py-4 px-7" :cols="7">
          <v-text-field
            v-model="search"
            append-outer-icon="mdi-magnify"
            class="gray-input"
            dense
            hide-details
            placeholder="Keyword Search"
            solo
          ></v-text-field>
        </v-col>
        <v-col class="pt-0 px-2 table-wrap">
          <Table
            class="elevation-0"
            disable-sort
            dense
            hide-default-footer
            roundedHeader
            loading-text="Loading... Please wait"
            :search="search"
            :obstruct="false"
            :headers="propHeaders"
            :items="propItems"
            :loading="$attrs.loading"
          >
            <template #item="{ item }">
              <tr @click="clickTr(item)" class="text-left pointer">
                <td v-for="header in propHeaders" :key="header.value">
                  {{ item[header.value] }}
                </td>
              </tr>
            </template>
          </Table>
        </v-col>
      </v-spacer>
    </v-card>
  </Dialog>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Table from "@/components/Maintenance/Table/Table.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
interface IItem {
  [key: string]: any;
}
@Component({
  components: {
    Table,
    Dialog,
  },
  props: {
    items: {
      type: Array,
      default: () => [],
    },
    headers: {
      type: Array,
      default: () => [],
    },
  },
})
export default class SelectDialog extends Vue {
  get propItems() {
    return this.$props.items;
  }

  get propHeaders() {
    return this.$props.headers;
  }

  search = "";

  close() {
    this.$emit("close");
  }

  clickTr(item: IItem) {
    this.$emit("click", item);
  }
}
</script>

<style lang="scss" scoped>
@import "./SelectDialog.scss";
</style>
